<template>
  <div class="m-comment-manage">
    <!-- 内容列表 -->
    <list :list="commentList" @visable="visableEvalute"></list>
    <!-- 分页 -->
    <w-paging v-show="totalPage > 1" :current="currentPage" :total="totalPage" @page="getNextPage"></w-paging>
  </div>
</template>

<script>
  import List from './list'

  // 导入评论接口
  import { apiEvalute } from '../../common/api.js'

  export default {
    data() {
      return {
        // 每页展示数量
        pageSize: 5,

        // 当前页
        currentPage: 1,

        // 总页数
        totalPage: 1,

        // 评论列表
        commentList: []
      }
    },
    created() {
      this.handlerEvaluteList()
    },
    methods: {
      /**
       * 获取所有的列表信息
       */
      handlerEvaluteList() {
        apiEvalute.getEvaluteList(this.$store.getters.token, this.currentPage, this.pageSize).then((data) => {
          // 当前值
          this.commentList = data.list

          // 当前页
          this.currentPage = (data.currentPage || 1)

          // 总页码
          this.totalPage = (data.totalPage || 1)
        })
      },

      /**
       * 屏蔽当前评论
       *
       * @param  {Object} item 当前评价
       * visable 1: 屏蔽评论 2: 展示评论
       */
      visableEvalute(item) {
        apiEvalute.setEvaluateVisable(item.id, item.visable, this.$store.getters.token).then((data) => {
          // 将点击的评论置为屏蔽状态
          this.commentList.forEach((v) => {
            if (v.id == item.id) {
              v.evaluateStatus = item.visable
            }
          })
        })
      },

      /**
       * 获取下一页
       * @param  { Number } page 当前页
       */
      getNextPage(page) {
        // 设置当前页
        this.currentPage = page

        // 获取列表
        this.handlerEvaluteList()
      }
    },
    components: {
      List
    }
  }
</script>

<style lang="scss" scoped>
  .m-comment-manage {
    .btn-group {
      margin-top: 20px;
    }
    .datepicker-container {
      display: inline-block;
      width: 190px;
    }
  }
</style>